<html>
	<head>
		<title>Vue.js Basics</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<style>
		.canvas {
			width:300px;
			height:300px;

		}
		code {
			display:block;
		}
		
		</style>
	</head>
	<body>


		<h1>Vue Basics 2</h1>
		<div id="app">
			<h2>{{ title }}</h2>
			<h3 class="d-flex justify-content-start align-items-start">
			<p>绑定状态: </p> <button  class="text-secondary btn-big" v-bind:class="{'text-success': isActived}" @click="isActived = !isActived">{{ isActived ? 'on' : 'off' }}</button>
			</h3>

			<!--数据绑定-->
			<p>{{ greet('morning') }}</p>
			<!--使用方法和传入参数-->
			<a :href="url">YoutTube</a>
			<!--属性绑定用 v-binding:属性名="变量名",可以省略为:属性名="变量名"-->


			<div :class="classes">这是一个div,绑定class属性 b</div>
			<!--注意数据源为数组，这是自动展开成为了字符串-->


			<p>
				I earn
				{{ wage }}
				dollars an hour.</p>
			<button v-on:click="wage++">increase
			</button>
			<button v-on:click="wage--">decrease
			</button>

			<hr>
			<section class="container">
				<code>不在click里直接递增，使用方法传参的方式</code>
				<button v-on:dblclick="changeWage(2)">双击增加2
				</button>
				<button v-on:dblclick="changeWage(-2)">双击减少2
				</button>
			</section>

			<section class="container">
				<button @click="logEvent">log click event</button>
			</section>

			<div v-bind:class="inputClasses">
				<div class="input-group-prepend">
					<span class="input-group-text" id="inputGroup-sizing-lg">Mr</span>
				</div>
				<input type="text" class="form-control" readonly aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg" :value="name">

			</div>
			<code>查看鼠标在画布的实时座标</code>
			<div class="canvas m-2 bg-info" @mousemove="logCoors">
			<span class="info bg-danger">{{coordinate.x}} , {{coordinate.y}}</span>
			</div>

			<code>绑定键盘事件 </code>
			<input type="text" name="name" id="hello" @keyup="updateName"/>
			
			

			<code>使用Model</code>
			<input type="text" name="name" id="" v-model="name">

			<code>只有按alt点击按钮时才触发(key modifier)</code>
			<button @click.alt="logMessage">Click me with alt key press</button>

			<code>阻断打开链接地址 event modifier</code>
			<a href="https://google.com" @click.prevent="logMessage">Google</a>

			<code>模板按条件渲染</code>
			<em  v-if="showName" >{{ name }}</em>

			<button @click="toggleShowName">点点我 {{showName}}</button>
			<button @click="showName=!showName">另一种方式，切换showName {{showName}}</button>

			<code v-if="showAge">{{age}}</code>
			<code v-else>hide the age</code>
			<button @click="toggleShowAge">切换showAge {{showAge}}</button>

			<h1>皮皮大名录：</h1>
			<ul>
				<li v-for="name in names">{{name}}</li>
			</ul>


			<h1>狗狗登录</h1>
			<ul>
				<li v-for="(dog,index) in dogs ">{{index+=1}}. {{dog.name}}({{dog.gender}}) : {{dog.age}}</li>
			</ul>

			<h1>待办事项</h1>
			<ol>
				<!-- 创建一个 todo-item 组件的实例 -->
				<todo-item 
				    v-for="item in groceryList"
      				v-bind:todo="item"
      				v-bind:key="item.id"

				></todo-item>
			</ol>

			<h1>绑定后，值不变 </h1>
			<span v-once>这个值不会改变:  wage: {{wage}}</span>

			<h1>输出原始html</h1>
			 <code>默认会转义: {{rawHtml}}			</code>			
			<span v-html="rawHtml"></span>

			<h1>动态绑定属性/事件</h1>
			<em>好像这个动态绑定的属性和事件名不能用驼峰写法？会自动转化成小写的data属性</em>
			<ol>
			<li><a v-bind:[attr]="url"> 动态绑定属性 </a></li>
			<li><a v-on:[eventname]="doSomething"> 动态绑定事件 </a></li>
			</ol>

			<h1>计算属性</h1>		
			
			<em>依赖元素与计算属性双向绑定</em>
			<input type="text" name="name"  v-model="name">
			<p>{{reversedName}}</p>

			<h1>监听属性</h1>
			<p>全名： {{fullName}}</p>
			<p>{{lable}} {{fullName}}</p>


			<h1>计算属性的setter</h1>
			<p>{{label2}}</p>

			<h1>侦听器</h1>
			<div id="watch-example">
				<p>
					Ask a yes/no question:
					<input v-model="question">
				</p>
				<p>{{ answer }}</p>
			</div>

		</div><!--end of App -->


		


		<script src="app.js"></script>
	</body>
</html>
